/* リセットCSS */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* ローディング画面 */
#loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #0bd;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  
  .spinner {
    width: 100px;
    height: 100px;
    margin: 200px auto;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-scaleout 1.0s infinite ease-in-out;
  }
  /* ローディングアニメーション */
  @keyframes sk-scaleout {
    0% {
      transform: scale(0);
    } 100% {
      transform: scale(1.0);
      opacity: 0;
    }
  }

  body {
    background-color: #171717;
  }

    .SITE-HEADER {
        background-color: #d6ff4e;
    }

    .header-text {
        /* フォントの種類 */
        font-family: 'Playfair Display', serif;
        /* フォントの太さ */
        font-weight: 400;
        /* フォントの大きさ */
        font-size: 3rem;
        text-align: left;
        line-height: 1.35em;
        margin-left: 8rem;
    }

    /* ヘッダーの文字の下に線を引く */
    .horizontal-line1 {
        /* 線の色 */
        background-color: #000;
        /* 線の太さ */
        height: 1px;
        /* 線の長さ */
        width: 80%;
        /* 線を垂直中央に配置 */
        margin: 0 auto;
    }

    .nav-bar {
        /* ナビゲーションの文字の大きさ */
        font-size: 1rem;
    }

    /*リストを横並びにする*/
    .nav-bar ul {
        display: flex;
        justify-content: center;
        list-style: none;
    }

    .nav-bar li {
        margin: 2rem 1.5rem;
        
    }

    .nav-bar a {
        /* ナビゲーションの文字の色 */
        color: #000;
        text-decoration: none;
        font-family: 'BIZ UDGothic', sans-serif;
    }

    /* ヒーローセクション */
    .hero-text {
        /* header-textと同じフォント */
        font-family: 'Playfair Display', serif;
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        color: #d6ff4e;
        background-color: #101010;
        padding: 2rem 0;
    }

    .hero-text p {
        /* ヒーローセクションの文章の大きさ */
        font-family: 'BIZ UDGothic', sans-serif;
        font-size: 1rem;
    }

    .hero-images img {
        width: auto;
        height: auto;

        max-height: 50vh;
        /*画像の位置を中央に*/
        margin: 0 auto;
    }

    
    .bx-wrapper {
        margin: 0 auto;
        padding-bottom: 60px ;
        border: #171717 ;
        background: #171717 ;
        z-index: 2;
    }
    

    

    .bxslider {
        /*class="slider"の子要素divを指定*/
        height: 100%;
        /*高さ指定*/
        text-align: center;
        font-size: 24px;
        background: #171717;
        display: flex;
        justify-content: center;
        align-items: center;
        /*背景色*/
    }

    .bxslider li {
        display: block;
        cursor: pointer;
    }

    .bx-wrapper .bx-pager.bx-default-pager a {
        background: #cfcfcf;
    }

    .bx-wrapper .bx-pager.bx-default-pager a.active {
        background: #d6ff4e;
    }
    

    /* ギャラリーセクション */
    .gallery {
        /* ギャラリーセクションの背景色 */
        background-color: #d6ff4e;
    }

    /* コンタクトセクション */
    .contact-container {
        /* コンタクトセクションの背景色 */
        background-color: #171717;
        /* コンタクトセクションの高さ */
        height: 60vh;
        /* コンタクトセクションの幅 */
        width: 100%;
        /* コンタクトセクションの位置を中央に */
        margin: 0 auto;
        padding-top: 60px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    /*
    .float-square .lines {
        display: flex;
        flex-direction: row;
        margin-top: 2rem;
    }

    .float-square .line {
        background-color: #bde145;
        height: 1px;
        width: 20%;
    }
    */


    .float-square {
        display: flex;
        flex-direction: column;
        /* float-squareの背景色 */
        background-color: #d6ff4e;
        /* float-squareの高さ */
        height: auto;
        /* float-squareの幅 */
        width: auto;
        min-width: 30%;
        max-width: 70%;
        /* float-squareの位置をcontact-containerの中央に */
        margin: 0 auto;

        position: absolute;
        /* float-squareの角を丸くする */
        border-radius: 2rem 2rem 2rem 2rem;
        padding: 0 2rem 2rem 2rem;
    }


    .contact-text {
        text-align: center;
        padding: 2rem 0;
    }

    .more{
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    .about-button a {
        /* ボタンの文字の色 */
        color: #d6ff4e;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        /* ボタンの背景色 */
        background-color: #000;
        /* ボタンの文字の大きさ */
        font-size: 1.5rem;
        /* ボタンの幅 */
        width: 15rem;
        /* ボタンの高さ */
        height: 5rem;

        /* ボタンの角を丸くする */
        border-radius: 2rem;
        /* ボタンの文字の位置を中央に */
        text-align: center;
        /* ボタンの文字の位置を中央に */
        line-height: 5rem;
        /* ボタンの位置を中央に */
        margin: 0 auto;
        padding: 2rem;
    }

    .about-button a:hover {
        background-color: #292929;
        color: #96b23f;
    }

    .portfolio-button a {
        /* ボタンの文字の色 */
        color: #d6ff4e;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        /* ボタンの背景色 */
        background-color: #000;
        /* ボタンの文字の大きさ */
        font-size: 1.5rem;
        /* ボタンの幅 */
        width: 15rem;
        /* ボタンの高さ */
        height: 5rem;

        /* ボタンの角を丸くする */
        border-radius: 2rem;
        /* ボタンの文字の位置を中央に */
        text-align: center;
        /* ボタンの文字の位置を中央に */
        line-height: 5rem;
        /* ボタンの位置を中央に */
        margin: 0 auto;
        padding: 2rem;
    }

    .portfolio-button a:hover {
        background-color: #292929;
        color: #96b23f;
    }

    /* フッター */

    footer {
        /* フッターの背景色 */
        background-color: #171717;
        /* フッターの文字の大きさ */
        font-size: 1rem;
        /* フッターの文字の色 */
        color: #d6ff4e;
    }

    footer .line {
        /* 線の色 */
        background-color: #d6ff4e;
        /* 線の太さ */
        height: 1px;
        /* 線の長さ */
        width: 80%;
        /* 線を垂直中央に配置 */
        margin: 0.2rem auto;
    }

    footer .line::before {
        position: absolute;
        display: block;
        content: '';
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
        background-color: #d6ff4e;
        margin-top: -0.25rem;
    }

    footer .line::after {
        position: absolute;
        display: block;
        content: '';
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 50%;
        background-color: #d6ff4e;
        margin-top: -0.25rem;
        margin-left: 80%;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
    }

    .social-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4rem;
    }

    .social-links img {
        max-width: 3rem;
        min-width: 3rem;
    }

    .footer-text {
        text-align: center;
        padding: 2rem 0;
    }